<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="wrap">
        <button class="btn">新增</button>
        <div class="list">
            <li class="first a b c">01</li>
            <li>02</li>
            <li class="mid">03</li>
            <li>04</li>
            <li>05</li>
            <li class="last">06</li>
        </div>
    </div>
</body>
<script>
    // 需求:  模拟封装 getElementsByClassName(className)  => 从页面中所有的元素含有指定class名的元素
    // 如何获取页面的所有元素?
    // (1)   document.all
    // (2)   document.getElementsByTagName("*")
    var result = myGetElementsByClassName("first");
    console.log(result);
    function myGetElementsByClassName(className) {
        var all = document.getElementsByTagName("*");
        var arr = [];
        for (var i = 0; i < all.length; i++) {
            var ele = all[i];  //遍历集合 => 每一个html元素
            var _class = ele.getAttribute("class");
            if (_class) { // 如果含有class名
                var classList = _class.split(" "); //用空格拆分成数组再遍历
                if (myIndexOf(classList, className) != -1) {
                    arr.push(ele);
                }
            }
        }
        return arr;
    }

    function myIndexOf(arr, char) {
        var index = -1; //假设不存在 -1
        for (var i = 0; i < arr.length; i++) {
            var item = arr[i];
            if (item === char) {
                index = i;  //存在就记录下标
            }
        }
        return index;
    }


</script>

</html>